<template>
	<div>
		<div id="eg">
			<PagePithy ref="page" :current.sync="current" :total="total" :page-size="pageSize" :show-sizer="showSizer"
					   @on-change="onChangeFn" @on-page-size-change="onPageSizeChangeFn"/>
			<div ref="log" class="log">{{log}}</div>
			<iButton type="primary" @click="toPage">toPage</iButton>
			<iButton type="primary" @click="changePageSize">changePageSize</iButton>
		</div>
		<ApiTable :data="data" :bind="this"/>
		<CodeShow :code="code"/>
	</div>
</template>

<script>
	import ApiTable from './tools/ApiTable';
	import PagePithy from '@/components/PagePithy';
	export default{
		name:'PagePithyEG',
		components:{
			ApiTable,
			PagePithy
		},
		data(){
			return {
				current:1,
				total:80,
				pageSize:10,
				showSizer:true,
				log:'',
				data:[
					{
						title:'属性',
						value:[
							{name:'current',info:'当前页(支持sync修饰符)',type:'Number',def:'1',set:{type:'number',bind:'current'}},
							{name:'total',info:'总记录条数',type:'Number',def:'0',set:{type:'number',bind:'total'}},
							{name:'page-size',info:'每页记录条数',type:'Number',def:'10',set:{type:'number',bind:'pageSize'}},
							{name:'show-sizer',info:'是否显示改变分页器',type:'Boolean',def:'false',set:{bind:'showSizer'}}
						]
					},{
						title:'事件',
						type:true,
						value:[
							{name:'on-change',info:'当前页改变',type:'Number'},
							{name:'on-page-size-change',info:'每页记录条数改变',type:'Number'}
						]
					},{
						title:'方法',
						type:true,
						value:[
							{name:'toPage',info:'跳转指定页',type:'Number'},
							{name:'changePageSize',info:'改变每页记录条数',type:'Number'}
						]
					}
				]
			};
		},
		computed:{
			code(){
				return `
<template>
	<PagePithy ref="page" :current.sync="current" :total="total" :page-size="pageSize" :show-sizer="showSizer"
				@on-change="onChangeFn" @on-page-size-change="onPageSizeChangeFn"/>
</template>
<script>
	export default{
		data:function(){
			return {
				current:${this.current},
				total:${this.total},
				pageSize:${this.pageSize},
				showSizer:${this.showSizer},
			};
		},
		methods:{
			onChangeFn:function(curPage){
				console.log(curPage);
			},
			onPageSizeChangeFn:function(curPageSize){
				console.log(curPageSize);
			},
			toPage:function(){
				this.$refs.page.toPage(this.current+1);
			},
			changePageSize:function(){
				this.$refs.page.changePageSize(Math.floor(20*Math.random()+10));
			}
		}
	};
</${'script'}>
`;
			}
		},
		watch:{
			log(){
				this.$nextTick(function(){
					this.$refs.log.scrollTop=Number.MAX_SAFE_INTEGER;
				});
			}
		},
		methods:{
			onChangeFn(cur){
				this.log+='on-change事件:'+cur+'\n';
			},
			onPageSizeChangeFn(curSize){
				this.log+='on-page-size-change事件:'+curSize+'\n';
			},
			toPage(){
				this.$refs.page.toPage(this.current+1);
			},
			changePageSize(){
				this.$refs.page.changePageSize(Math.floor(20*Math.random()+10));
			}
		}
	};
</script>

<style lang="scss" scoped>
	#eg{
		margin:20px;
		>.log{
			padding:5px 10px;
			overflow-y:auto;
			white-space:pre-wrap;
			width:500px;
			height:150px;
			margin-top:10px;
			border:1px solid;
		}
		>button{
			margin:10px 10px 0 0;
		}
	}
</style>
